<template>
  <view>
    <view class="hrader">
      <image
        src="../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      {{ title }}
    </view>
    <view class="content">
      <view class="row">
        <text>收货人：</text>
        <input type="text" v-model="name" placeholder="名字" />
      </view>
      <view class="row">
        <text>联系电话：</text>
        <input
          type="number"
          v-model="phone"
          placeholder="手机号"
          maxlength="11"
        />
      </view>
      <view class="row" @click="picker">
        <text>所在地区：</text>
        <input
          disabled
          type="text"
          v-model="areadrees"
          placeholder="省、市、区"
        />
      </view>
      <view class="row">
        <text>详细地址：</text>
        <input
          type="text"
          v-model="address_detail"
          placeholder="小区楼栋/乡村名称"
        />
      </view>
      <view class="lastrow" @click="isDefault">
        <view class="lef">
          <text class="zbt">设为默认地址</text>
          <text class="fbt">注：每次下单将默认该地址为收货地址</text>
        </view>
        <image
          v-if="defaultre"
          class="img"
          src="../../static/ridos.png"
          mode=""
        />
        <image v-else class="img" src="../../static/rido.png" mode="" />
      </view>
      <cityPicker
        @onConfirm="onConfirm"
        @onCancel="onCancel"
        :showPicker="showPicker"
      ></cityPicker>
    </view>
    <view v-if="!this.id" class="btns" @click="GoodsAddress">保存</view>
    <view v-else class="btns" @click="updaAddress">保存</view>
  </view>
</template>

<script>
import cityPicker from "@/components/com-city-picker/com-city-picker.vue";

export default {
  data() {
    return {
      title: "添加收货地址",
      showPicker: false,
      areadrees: "",
      area: {},
      name: "",
      phone: "",
      province_name: "", // 省名称
      city_name: "", // 市名称
      area_name: "", // 区名称
      area_code: "", // 区code
      address_detail: "",
      defaultre: false,
      is_default: "",
      id: "",
      detail: {},
    };
  },
  components: {
    cityPicker,
  },
  onLoad(e) {
    this.id = e.id;
    if (this.id) {
      this.title = "编辑收货地址";
      this.getDetail(this.id);
    }
  },
  methods: {
    gobackClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 选择地区
    picker() {
      this.showPicker = true;
    },
    // 确认
    onConfirm(e) {
      this.showPicker = false;
      this.area = e;
      if (this.area.length >= 3) {
        this.areadrees = `${this.area[0].label}-${this.area[1].label}-${this.area[2].label}`;
        this.province_name = this.area[0].label;
        this.city_name = this.area[1].label;
        this.area_name = this.area[2].label;
        this.area_code = this.area[2].code;
      }
    },
    // 取消
    onCancel() {
      this.showPicker = false;
    },
    // 是否默认地址
    isDefault() {
      this.defaultre = !this.defaultre;
      if (this.defaultre) {
        this.is_default = 1;
      } else {
        this.is_default = 0;
      }
    },
    // 新增地址
    async GoodsAddress() {
      if (this.name == "") {
        uni.showToast({
          title: "请填写收货人",
          icon: "none",
        });
        return;
      }
      if (this.phone == "") {
        uni.showToast({
          title: "请填写手机号",
          icon: "none",
        });
        return;
      }
      if (this.areadrees == "") {
        uni.showToast({
          title: "请选择所在地区",
          icon: "none",
        });
        return;
      }
      if (this.address_detail == "") {
        uni.showToast({
          title: "请填写详情地址",
          icon: "none",
        });
        return;
      }
      const res = await this.$myRequest({
        url: "address/addGoodsAddress",
        method: "POST",
        data: {
          name: this.name,
          phone: this.phone,
          province_name: this.province_name,
          city_name: this.city_name,
          area_name: this.area_name,
          area_code: this.area_code,
          address_detail: this.address_detail,
          is_default: this.is_default,
        },
      });
      if (res.data.code == 1) {
        this.gobackClick();
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
    // 获取编辑地址详情
    async getDetail(i) {
      const res = await this.$myRequest({
        url: "address/getGoodsAddressDetail",
        method: "POST",
        data: {
          id: this.id,
        },
      });
      if (res.data.code == 1) {
        this.detail = res.data.msg;
        this.name = this.detail.name;
        this.phone = this.detail.phone;
        this.areadrees = `${this.detail.province_name}-${this.detail.city_name}-${this.detail.area_name}`;
        this.address_detail = this.detail.address_detail;
        if (this.detail.address_is_default == 1) {
          this.defaultre = true;
          if (this.defaultre) {
            this.is_default = 1;
          } else {
            this.is_default = 0;
          }
        } else {
          this.defaultre = false;
          if (this.defaultre) {
            this.is_default = 1;
          } else {
            this.is_default = 0;
          }
        }
      }
    },
    // 修改地址
    async updaAddress() {
      const res = await this.$myRequest({
        url: "address/updateGoodsAddress",
        method: "POST",
        data: {
          id: this.id,
          name: this.name || this.detail.name,
          phone: this.phone || this.detail.phone,
          province_name: this.province_name || this.detail.province_name,
          city_name: this.city_name || this.detail.city_name,
          area_name: this.area_name || this.detail.area_name,
          area_code: this.area_code || this.detail.area_code,
          address_detail: this.address_detail || this.detail.address_detail,
          is_default: this.is_default,
        },
      });
      if (res.data.code == 1) {
        this.gobackClick();
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f4f4f4;
  height: 100vh;
  position: relative;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.content {
  padding-top: 110rpx;
  overflow: hidden;
  .row {
    width: 100%;
    height: 100rpx;
    box-sizing: border-box;
    padding: 0 30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    align-items: center;
    background: #fff;
    text {
      display: block;
      width: 150rpx;
      margin-right: 30rpx;
      font-size: 28rpx;
      color: #333333;
      font-weight: bold;
      white-space: nowrap;
    }
    input {
      font-size: 28rpx;
      flex: 1;
    }
  }
  .lastrow {
    width: 100%;
    height: 130rpx;
    box-sizing: border-box;
    padding: 0 25rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    .lef {
      .zbt {
        display: block;
        font-size: 28rpx;
        color: #333333;
        font-weight: bold;
      }
      .fbt {
        display: block;
        font-size: 26rpx;
        color: #999999;
        margin-top: 10rpx;
      }
    }
    .img {
      display: block;
      width: 34rpx;
      height: 34rpx;
    }
  }
}
.btns {
  width: 350rpx;
  height: 74rpx;
  text-align: center;
  line-height: 74rpx;
  background: #c52b2e;
  border-radius: 37rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
  margin: 100rpx auto 0;
}
</style>
